{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            background: url("{% static 'image/bg.jpg' %}") center 50% no-repeat;
        }

        #auth-box {
            width: 500px;
            padding: 20px;
            background-color: #fff;
            border-radius: 6px;
        }

        #auth-box .title {
            border-bottom: 1px solid #ccc;
            padding: 0 0 10px 0;
        }
    </style>
</head>
<body>
<div id="auth-box">
    <h3 class="title text-center">{{ title }}</h3>
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                {{ message|safe }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endfor %}
    {% endif %}

    <form action="{{request.get_full_path }}" method="post">
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group">
                <label for="{{ field.auto_id }}">{{ field.label }}</label>
                {{ field }}
                <small id="{{ field.auto_id }}_help" class="form-text text-muted">{{ field.help_text }}</small>
            </div>
        {% endfor %}

        <a href="{% url 'blog:index' %}">首页</a>
        <button type="submit" class="btn btn-sm btn-primary float-right">提交</button>
    </form>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</html>